<template>
  <div>

      <el-row style="margin:20px">
          <el-card shadow="never" v-if="instConfigs.length">
            <div slot="header" class="clearfix">
              <span>配置文件</span>
              <el-button style="float: right;margin-left:5px;" @click="restartBtn">重启</el-button>
              <!-- <el-button style="float: right;" @click="centerDialogVisible = true">新增路径</el-button> -->
            </div>
            <el-table style="width: 100%" :data="instConfigs">
              <el-table-column prop="configName" label="文件名" align="center"> </el-table-column>
              <el-table-column prop="configSourceFile" label="运行时配置目录" align="center"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit(scope.row)">
                    <i class="el-icon-edit" ></i>
                  </el-button>
                  <!-- <el-button type="text" @click="handleDelete">
                    <i class="el-icon-delete" ></i>
                  </el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <p class="grey" v-else>暂无配置信息</p>
      </el-row>
      <!-- <el-row style="margin-top:10px;">
        <el-card shadow="never">
            <div slot="header" class="clearfix">
              <span>高级配置</span>
            </div>
            <el-table style="width: 100%" :data="hjList">
              <el-table-column prop="varsName" label="变量名" align="center"> </el-table-column>
              <el-table-column prop="varsValue" label="变量值" align="center"> </el-table-column>
            </el-table>
            <el-table style="width: 100%" :data="dkList">
              <el-table-column prop="varsName" label="容器端口" align="center"> </el-table-column>
              <el-table-column prop="varsValue" label="端口映射" align="center"> </el-table-column>
            </el-table>
            <el-table style="width: 100%" :data="glList">
              <el-table-column prop="varsName" label="应用名" align="center"> </el-table-column>
              <el-table-column prop="varsValue" label="关联关系" align="center"> </el-table-column>
            </el-table>
            <el-table style="width: 100%" :data="gzList">
              <el-table-column prop="varsName" label="容器挂载目录" align="center"> </el-table-column>
              <el-table-column prop="varsValue" label="宿主机目录" align="center"> </el-table-column>
            </el-table>
            <el-table style="width: 100%" :data="rzList">
              <el-table-column prop="varsValue" label="日志指定目录" align="center"> </el-table-column>
            </el-table>
        </el-card>
      </el-row> -->
   
    
    <!-- 读取文件内容 -->
    <el-dialog
            title="文件内容"
            :visible.sync="dialogVisible"
            width="50%">
            <div>
            <el-input type="textarea" :rows="15" v-model="content" v-loading="loading"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleUpdateConfig">修改</el-button>
            </span>
    </el-dialog>

    <!-- 上传文件 -->
    <el-dialog
        title="文件上传"
        :visible.sync="centerDialogVisible"
        width="22%"
        center>
        <div style="padding:0 20px;height:150px;text-align:center;">
            <el-input placeholder="请输入配置文件路径" style="width:200px;margin-bottom:10px;" v-model="url"></el-input>
            <el-upload
                class="upload-demo"
                ref="upload"
                action="https://jsonplaceholder.typicode.com/posts/"
                :file-list="fileList"
                :limit = '1'
                :on-success="uppzSuccess"
                :before-upload="uppzBefore"
                :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" :disabled="disabled">上传到服务器</el-button>
            </el-upload>
        </div>
    </el-dialog>
  </div>
</template>



<script>
  import { getFileContent } from '@/service/swagger/FileController.js'
  import { updateConfFile } from '@/service/swagger/DeployContentController.js'
  export default{
    props:[
      "instConfigs",
      "varsInfo",
      "relaInfo"
    ],
    data(){
      return{
         id:this.$route.query.id,
         content:"",
         cRow:{},
         loading:false,
         dialogVisible:false,
         centerDialogVisible:false,
         fileList:[],
         url:'',
         disabled:true,
         hjList:[{varsName:'111',varsValue:'1111'}],
         dkList:[{varsName:'111',varsValue:'1111'}],
         glList:[{varsName:'111',varsValue:'1111'}],
         gzList:[{varsName:'111',varsValue:'1111'}],
         rzList:[{varsName:'111',varsValue:'1111'}]
      }
    },
    mounted() {
      
    },
    methods:{
      // 获取文件内容
      handleEdit(row){
        console.log(row)
          this.loading = true
          this.cRow = row
          this.content = ''
          this.dialogVisible = true
          getFileContent({filePath:row.configSourceFile}).then(ret=>{
          this.loading = false
            if(ret&&ret.code == 0){
              this.content = ret.data
            }
          })
      },
      // 更新文件内容
      handleUpdateConfig(){
        let params = {
          content: this.content,
          fileName: this.cRow.configName,
          fileType: 2,
          instId:this.$route.query.id,
          path: this.cRow.configSourceFile
        }
         updateConfFile(params).then(ret=>{
           if(ret&&ret.code == 0){
              this.dialogVisible = false
              this.$message({showClose: true,message: '修改配置文件成功',type: 'success'})
           }else{
              this.dialogVisible = false
              this.$message({showClose: true,message: '修改配置文件失败',type: 'error'})
           } 
         })
      },
      // 删除文件内容
      handleDelete(){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({type: 'success',message: '删除成功!'})
          })
      },
      uppzBefore(){

      },
      uppzSuccess(){

      },
      //上传文件
      submitUpload() {
          this.$refs.upload.submit();
      },
      // 重启
      restartBtn(){
        this.$emit('handleRestarbtn')
      }
    },
    watch:{
      url(val){
        if(val){
          this.disabled = false
        }else{
          this.disabled = true
        }
      }
    }
    
  }
</script>